<!DOCTYPE html>
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
	<meta content="telephone=no" name="format-detection" />
	<title>各种居中</title>
	<style>
		*{margin: 0;padding: 0;}
		i{font-size: 20px;}
		.between {width: 160px;height: 160px;border: 2px solid purple;position: relative;margin-top: 2px;}
		.inner {width: 80px;height: 80px;border: 2px solid red;}
		/*绝对定位已知宽高居中*/
		.inner001 {position: absolute;top: 50%;left: 50%;margin-top: -40px;margin-left: -40px;}
		/*绝对定位未知宽高，需支持css3*/
		#trans {position: absolute;top: 50%;left: 50%;transform:translate(-50%,-50%);}
		/*table布局居中*/
		#table {display: table;text-align: center;}
		.mid {display: table-cell;vertical-align:middle;}/*table-cell会充满table*/
		#table .inner {margin: auto;}
		/*table布局直接居中元素的文本*/
		#content {display: table;}
		.word {display: table-cell;vertical-align: middle;text-align: center;}
	</style>
</head>
<body>
	<!-- 将一个div在其直接父级div内居中，图片的居中可借助此方法 -->

	<!-- num001：绝对定位居中，被居中元素已知宽高 -->
	<div id="test01" class="between">
		<div class="inner001 inner">绝对定位居中，被居中元素<i><b>已知</b></i>宽高</div>
	</div>
	<!-- num002：绝对定位居中，被居中元素未知宽高，需支持css3 -->
	<div class="between">
		<div class="inner" id="trans">绝对定位居中，被居中元素<i><b>未知</b></i>宽高</div>
	</div>
	<!-- num003:table布局居中，被居中元素未知宽高(需另加一个空div包裹被居中元素) -->
	<div class="between" id="table">
		<div class="mid">
			<div class="inner"><i><b>table</b></i>布局居中，不需知道被居中元素宽高</div>
		</div>		
	</div>
	<div class="between" id="content">
		<div class="word">table布局直接居中其内容,感觉很恶心</div>
	</div>

	
</body>
</html>